iT邦幫忙

0

7.Bootstrap(中文教程)網格系统:響應式佈局

  • 分享至 

  • xImage
  •  

ㄧ.響應式佈局

<div id="demo" class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3"><span>1</span></div>
    <div class="col-12 col-sm-6 col-lg-3"><span>2</span></div>
    <div class="col-12 col-sm-6 col-lg-3"><span>3</span></div>
    <div class="col-12 col-sm-6 col-lg-3"><span>4</span></div>
  </div>
</div>


#demo.container{
  background: #054db1;
  color: white;
  height: 100vh;
}

#demo.container .row{
  background: #021d51;
  border-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > .col-12 > span,
#demo.container .row > .col-sm-6 > span,
#demo.container .row > .col-lg-3 > span{
  display: block;
  background: #487dbb;
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;
}

重點:
1.在手機的螢幕row裡面的col為12格,平板螢幕為6格,電腦螢幕為3格
2.col各個螢幕的尺寸
.col為最小螢幕通常為手機螢幕,也就是<576px
.col-sm為小螢幕為平板螢幕,也就是 ≥576px
.col-md為中螢幕的大平板,≥992px
.col-lg為大螢幕的電腦,也就是 ≥992px
.col-xl為超大螢幕的電腦,≥1200px

codepen
參考:bootstrap4


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言